<style include="cr-icons cr-shared-style shared-style">
  #clear-activities-button {
    margin-inline-start: 8px;
  }

  #closeButton {
    margin-inline-end: 16px;
  }

  #icon {
    height: 24px;
    margin-inline-end: 12px;
    width: 24px;
  }

  cr-tabs {
    --cr-tabs-font-size: inherit;
    --cr-tabs-height: 40px;
    border-bottom: 1px solid var(--google-grey-300);
  }

  .page-content {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  iron-pages {
    flex: 1;
    position: relative;
  }

  activity-log-history,
  activity-log-stream {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
</style>
<div class="page-container" id="container">
  <div class="page-content">
    <div class="page-header">
      <cr-icon-button class="icon-arrow-back no-overlap" id="closeButton"
          aria-label="$i18n{back}" on-click="onCloseButtonTap_">
      </cr-icon-button>
      <template is="dom-if" if="[[!extensionInfo.isPlaceholder]]">
        <img id="icon" src="[[extensionInfo.iconUrl]]" alt="">
      </template>
      <div class="cr-title-text">
        [[getActivityLogHeading_(extensionInfo)]]
      </div>
    </div>
    <cr-tabs selected="{{selectedSubpage_}}" tab-names="[[tabNames_]]">
    </cr-tabs>
    <iron-pages selected="[[selectedSubpage_]]">
      <div>
        <template is="dom-if"
            if="[[isHistoryTabSelected_(selectedSubpage_)]]" restamp>
          <activity-log-history extension-id="[[extensionInfo.id]]"
              delegate="[[delegate]]">
          </activity-log-history>
        </template>
      </div>
      <div>
        <template is="dom-if"
            if="[[isStreamTabSelected_(selectedSubpage_)]]">
          <activity-log-stream extension-id="[[extensionInfo.id]]"
              delegate="[[delegate]]">
          </activity-log-stream>
        </template>
      </div>
    </iron-pages>
  </div>
</div>
